<template>
	<div class="appointment">
		<div class="appointment-box" style="width: 470px;">
			<div class="top-title">预约日期</div>
			<el-calendar>
			  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
			  <template
			    slot="dateCell"
			    slot-scope="{date, data}">
			    <p :class="data.isSelected ? 'is-selected' : ''">
			      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
			    </p>
			  </template>
			</el-calendar>
		</div>
		<div class="appointment-box appointment-box1" style="width: 470px;">
			<div class="top-title">预约科室</div>
			<div class="search">
				<img  class="search-img" src="../../../assets/images/fa-search.png"/>
				<el-input class="search-input" v-model="input" placeholder="搜索科室名称..."></el-input>
				<div class="search-txt">搜索</div>
			</div>
			<div style="display: flex;justify-content: flex-start;">
			<div class="administrative-box">
				<div v-for="(item,index) in 9" class="administrative" :class="selectIndex==index?'selectActive':''">妇科病理</div>
			</div>
			<div class="administrative-box">
				<div v-for="(item,index) in 9" class="administrative" :class="selectIndex==index?'selectActive':''">妇科病理</div>
			</div>
			</div>
		</div>
		<div class="appointment-box" style="width: 725px;">
			<div class="top-title">预约人信息</div>
			<div class="title">基本信息</div>
			<el-form ref="form" :model="form" label-width="80px" :inline="true">
			  <el-form-item label="就诊姓名">
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  <el-form-item label="就诊性别">
			    <el-radio-group v-model="form.resource">
			      <el-radio label="男"></el-radio>
			      <el-radio label="女"></el-radio>
			    </el-radio-group>
			  </el-form-item>
			  <el-form-item label="身份证号">
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  <el-form-item label="就诊年龄">
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  <el-form-item label="手机号码">
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  <el-form-item label="所属民族">
			    <el-select v-model="form.region" placeholder="请选择活动区域" style="width: 170px;">
			      <el-option label="区域一" value="shanghai"></el-option>
			      <el-option label="区域二" value="beijing"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="联系地址" style="width: 100%;">
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  <el-form-item>
				  <el-upload
				    class="upload-demo"
				    action="https://jsonplaceholder.typicode.com/posts/"
				    :on-preview="handlePreview"
				    :on-remove="handleRemove"
				    :before-remove="beforeRemove"
				    multiple
				    :limit="3"
				    :on-exceed="handleExceed"
				    :file-list="fileList">
				    <el-button size="small" type="primary">点击上传</el-button>
				    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
				  </el-upload>
				  <el-upload
				    class="upload-demo"
				    action="https://jsonplaceholder.typicode.com/posts/"
				    :on-change="handleChange"
				    :file-list="fileList">
				    <el-button size="small" type="primary">点击上传</el-button>
				    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
				  </el-upload>
			  </el-form-item>
			</el-form>
			<!-- <el-form-item>
			  <el-button type="primary" @click="onSubmit">立即创建</el-button>
			  <el-button>取消</el-button>
			</el-form-item> -->
			<div class="title">就诊信息 <span style="color: #989898;">(上一次就诊信息)</span></div>
			<div class="visiti-box">
				<div>标本寄出日期：2024-03-04</div>
				<div>标本接收日期：2024-03-04</div>
				<div>阅片时间：2024-3-04   </div>
				<div>预约费用：100元</div>
				<div>单号：20241837233</div>
				<div>问诊项目：乳腺病理</div>
			</div>
			<div @click="onSubmit" class="submitbtn">立即创建</div>
		</div>
	</div>
</template>

<script setup>
import {reactive,toRefs} from "vue";


const state = reactive({
  selectIndex:0,
   form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          }
})

const {selectIndex,form} = toRefs(state)
</script>

<style scoped lang="scss">
	.is-selected {
	    color: #1989FA;
	  }
	.appointment{
		display: flex;
		justify-content: space-around;
		.appointment-box{
			// width: 33%;
			background-color: #fff;
			height: calc(100vh - 114px);
		}
	}
	.top-title {
		color: rgb(16, 16, 16);
		font-size: 16px;
		font-weight: 600;
		padding-left: 10px;
		position: relative;
		border-bottom:1px solid rgba(234,234,234,1);
		height: 50px;
		line-height: 50px;
		margin: 0 10px;
		
	}

	.top-title::after {
		content: "";
		display: block;
		height: 28px;
		width: 4px;
		border-radius: 10px;
		background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(142, 76, 183, 1) 85.87%);
		position: absolute;
		left: 0;
		top: 12px;
		border-radius: 0px 10px 10px 0px;
	}
	.title{
		height: 27px;
		line-height: 27px;
		color: rgb(0,68,251);
		font-size: 18px;
		font-weight: 500;
		margin-left: 10px;
	}
	.search{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 95%;
		height: 43px;
		margin:20px auto;
		line-height: 20px;
		border-radius: 30px 30px 30px 30px;
		border: 1px solid rgba(219,219,219,1);
		.search-img{
			width: 20px;
			height: 20px;
			margin-left: 10px;
		}
		.search-txt{
			height: 43px;
			width: 67px;
			border-radius: 0px 30px 30px 30px;
			background: linear-gradient(30deg, rgba(59,182,254,1) 13.4%,rgba(142,76,183,1) 85.87%);
			color: rgba(255,255,255,1);
			font-size: 14px;
			line-height: 43px;
			text-align: center;
		}
		:deep(.el-input__wrapper){
			background-color: #fff;
			border: none!important;
			outline: none;
			box-shadow:none;
		}
	}
	:deep(.el-form-item){
		margin-right: 8px;
	}
	.administrative-box{
		width: 134px;
		background-color: #f5fafd;
		margin-right:10px;
		.administrative{
			width: 134px;
			text-align: center;
			height: 50px;
			line-height: 50px;
			cursor: pointer;
		}
		.selectActive{
			background-color: #fff;
			color: rgba(59,182,254,1);
			font-size: 16px;
			font-weight: 600;
		}
	}
	.upload-demo{
		margin-right: 20px;
	}
	.visiti-box{
		display:flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		margin-left: 10px;
		padding-bottom: 20px;
		padding-top: 20px;
		div{
			width: 50%;
			margin-bottom: 20px;
			color: rgb(16,16,16);
			font-size: 18px;
		}
	}
	.submitbtn{
		width: 404px;
		height: 65px;
		line-height: 65px;
		text-align: center;
		border-radius: 5px;
		background: linear-gradient(30deg, rgba(59,182,254,1) 13.4%,rgba(142,76,183,1) 85.87%);
		color: #fff;
		font-size: 20px;
		margin: 0 auto;
	}
</style>